<%@ page import="com.Dao.FindBookDao" %>
<%@ page import="org.springframework.beans.factory.annotation.Autowired" %>
<%@ page import="com.pojo.FindBook" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Collections" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线图书阅读网站</title>
    <link rel="stylesheet" href="/css/Dou.css">
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
    <script src="/js/jquery-3.6.0.js"></script>
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
    <style>
        body {
            font-weight: 0;
            background: #f8f9f9;
            color: #333;
        }

        .btn-contained:hover {
            color: #fff;
            background-color: #389eac;
        }

        .btn-contained1:hover {
            color: #fff;
            background-color: #389eac;
        }

        .widget-channel {
            position: relative;
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }

        .section-container {
            box-sizing: content-box;
            margin-left: auto;
            margin-right: auto;
            padding-right: 60px;
            padding-left: 60px;
            max-width: 1200px;
        }

        .widget-channel .section-container:first-child {
            margin-left: 0;
        }

        .widget-channel .btn-contained1 {
            flex: 1;
            margin: 0 8px;
            height: 60px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            line-height: 60px;
        }

        .btn-contained1:not([data-size]) {
            padding: 0 20px;
        }

        .btn-contained1 {
            display: inline-block;
            border: none;
            border-radius: 4px;
            background: #fff;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            color: #333;
        }

        .mag {
            background: #fff;
            margin-top: 30px;
            height: 60px;
            width: 100%;
        }

        .nav-list li a::after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 15px;
            width: 50%;
            height: 2px;
            background-color: #000;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .nav-list li a:hover::after {
            transform: scaleX(1);
        }

        .cover {
            position: relative;
        }

        .hei {
            width: 120px;
            height: 180px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(51, 51, 51, 0.53);
            border-radius: 8px;
            display: none;

        }

        .cover:hover .hei {
            display: block;
            transition: all 0.6s;
            cursor: pointer;
        }

        .heihei {
            width: 80px;
            height: 120px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(51, 51, 51, 0.53);
            border-radius: 8px;
            display: none;
        }

        .cover:hover .heihei {
            display: block;
            transition: all 0.6s;
            cursor: pointer;
        }
        #header-compact-v3 .nav-user{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 50px;
            margin-right: -20px;
        }
        #header-compact-v3 .header-inner a:not([class^=btn]){
            color:#333;
        }
        #header-compact-v3 .nav-user .avatar{
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .header-inner a{
            cursor: pointer;
        }
        .avatar{
            position: relative;
        }
        a.avatar::after{
            position:absolute;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            border-radius: 100px;
            background: #000;
            content: '';
            opacity: 0;
            transition: opacity .1s ease-in;
        }
        #header-compact-v3 .nav-user .avatar img{
            width: 100%;
            vertical-align: top;
            object-fit: cover;
        }
        .avatar img{
            display: block;
            width: 100%;
            border-radius: 100px;
        }
        img{
            border: none;
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
        }
        #header-compact-v3 .more-active:hover .drop-down-list{
            display: block;
        }
        #header-compact-v3 .nav-user .drop-down-list{
            top:50px;
        }
        .drop-down-list{
            position:absolute;
            right: 0;
            z-index: 200;
            padding: 10px 0;
            min-width: 120px;
            max-width: 130px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            text-align: left;
            display: none;
        }
        .drop-down-list::before{
            position: absolute;
            margin-top: -22px;
            width: 100%;
            height: 12px;
            content: '';
        }
        #header-compact-v3 .more-active .drop-down-list a{
            color: #333;
        }
        .header-inner{
            cursor: pointer;
        }
        .drop-down-list a{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 9px;
            white-space: nowrap;
            line-height: 25px;
        }
        .drop-down-list a:hover {
            background-color: #abcdef;
        }
    </style>
<body>
<%
    String username = (String) request.getSession().getAttribute("username");//从session中获取当前用户的登陆信息
%>
<div class="wrapper layout-v3">
    <!-- 头部 -->
    <div id="header-container">
        <header id="header-compact-v3" class="pre-rendered-header should-stick">
            <div class="header-inner">
                <a href="#" title="豆瓣阅读" class="site-logo"></a>
                <nav class="func-nav">
                    <ul>
                        <li>
                            <button title="分类" class="nav-category fill-current-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7">
                                    <path fill="#a6a6a6"
                                          d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"></path>
                                </svg>
                                <span class="text" style="font-size: 14px">分类</span>
                            </button>
                        </li>
                        <li>
                            <button id="btn" onclick="toggle()" title="搜索" class="nav-category fill-current-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 14 14">
                                    <path fill="#a6a6a6"
                                          d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"></path>
                                </svg>
                                <span class="text" style="font-size: 14px">搜索</span>
                            </button>
                        </li>
                    </ul>

                    <div class="sousuo" id="content" style="display:none;">

                        <form action="#" class="search-form">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                                 class="search-icon">
                                <circle cx="8.486" cy="8.486" r="7.736" stroke="#35393C" stroke-width="1.8">

                                </circle>
                                <path fill="#fff" stroke-width="1.2" stroke="#35393C"
                                      d="M4.603 4.603a5.491 5.491 0 000 7.765"></path>
                                <path fill="#A6A6A6" stroke-width="1.2" stroke="#35393C"
                                      d="M13.685 14.39l.705-.705 2.55 2.55a.498.498 0 01-.704.706l-2.55-2.55z"></path>
                            </svg>


                            <input type="text" name="searchMessage" maxlength="60" autocomplete="off" id="searchMessage"
                                   placeholder="原创作品 / 同人文 / 电子书 / 作者 / 译者 / 出版社">

                            <button class="btn-search" type="button"  onclick="search(event)" id="submit">搜索</button>
                        </form>

                        <!-- 热搜 和历史记录 -->

                        <div class="re">
                            <div class="lis">
                                <div>
                                    <div>
                                        搜索历史 <span>清除</span>
                                    </div>
                                    <div style="width: 100%; height: 200px;margin-left: 140px;">
                                        <div class="k strs">
                                            <strong> 吊桥效应</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="lis">
                                <div>
                                    <div>
                                        热门搜索
                                    </div>
                                    <div style="width: 100%; height: 200px;margin-left: 140px;">
                                        <div class="k">
                                            <strong class="iii"> 食得咸鱼低得喝</strong>
                                            <strong class="kkk"> 在傍晚回家</strong>
                                        </div>
                                        <div class="k stt">
                                            <strong class="kk"> 大城小爱</strong>
                                            <strong class="sttt"> 多雨之地</strong>
                                        </div>
                                        <div class="k strs">
                                            <strong> 白日谎言</strong>
                                            <strong> 日偏食</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="lis">
                                <div>
                                    <div>
                                        为你推荐
                                    </div>
                                    <div style="width: 100%; height: 200px;margin-left: 140px;">
                                        <div class="k strs">
                                            <strong> 6部热门原创小说现时半价</strong>
                                        </div>
                                        <div class="k strs">
                                            <strong> 2022 年度榜单</strong>
                                        </div>
                                        <div class="k strs">
                                            <strong> 第五届长篇拉力赛获奖名单公布</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
                <!-- 头部中间部分 -->
                <div class="site-nav-container">
                    <nav class="site-nav site-nav-normal" id="myElement">
                        <ul class="nav-list">
                            <li class="nav-item-original">
                                <a href="#">原创</a>
                            </li>

                            <li class="nav-item-chart">
                                <a href="#">排行</a>
                            </li>

                            <li class="nav-item-ebook">
                                <a href="#">出版</a>
                            </li>

                            <li class="nav-item-ebook">
                                <a href="#">会员</a>
                            </li>

                            <li class="nav-item-ebook">
                                <a href="#">APP</a>
                            </li>
                        </ul>
                    </nav>
                    <!-- 第二个导航栏 -->
                    <nav class="site-nav site-nav-original" id="myElementS">
                        <ul>
                            <li class="nav-item-original">
                                <a href="#" class="active">原创首页</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">完本</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">排行</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">言情</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">悬疑</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">女性</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">幻想</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">同人</a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div id="nav-submit" class="nav-submit">
                    <a href="transtition.jsp" class="lnk-start-publish fill-current-color">成为作者</a>
                </div>

                <nav class="site-nav-right">
                    <ul>
                        <li class="nav-bookshelf">
                            <a href="personalBookshelf.jsp" title="书架" aria-label="书架" class="require-login">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24"
                                     class="fill-current-color">
                                    <path fill="#a6a6a6"
                                          d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"></path>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- 第四部分 -->
                <div class="user-info" id="user-info">

                </div>
            </div>
        </header>

        <!-- 轮播图模块 -->
        <!-- Swiper -->
        <div class="swiper mySwiper" style="height: 250px">
            <div class="swiper-wrapper" style="height: 250px">
                <div class="swiper-slide" style="height: 200px">
                    <img src="https://pic.arkread.com/banner/campaign/u/15166.1700724485!campaign.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://pic.arkread.com/banner/campaign/u/14955.1697009760!campaign.png" alt="">
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="widget-channel section-container">
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">完本频道</a>
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">言情频道</a>
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">女性频道</a>
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">悬疑频道</a>
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">幻想频道</a>
        <a href="#" class="btn-contained1" title="完本频道" target="_blank">同人频道</a>
    </div>
    <!-- 畅销金榜 -->
    <div class="general-widget widget-hot" style="width: 100%;">
        <div class="section-container" style="width: 100%;">
            <div class="hd" style="margin-top: 20px;">
                <div class="title-section">
                    <h2 class="widget-title">畅销金榜</h2>
                    <div class="links">
                        <a href="#" class="btn-contained">查看更多</a>
                    </div>
                </div>
            </div>
            <div class="bd">
                <div class="slick-slider works-showcase slick-initialized">
                    <div class="slick-list">
                        <div class="slick-slide slick-active slick-current" style="outline: none; width: 1195px;">
                            <div>
                                <c:forEach var="book" items="${allbook.subList(0,5)}">
                                    <div class="works-item brief-works-item">
                                        <div class="cover shadow-cover">
                                            <a href="/find/findBookDetail?bookId=${book.getId()}">
                                                <img style="width: 120px;height:180px"
                                                     src="${book.getBookImage()}"
                                                     alt="">
                                                <div class="hei"></div>
                                            </a>


                                        </div>
                                        <div class="info">
                                            <h4 class="title" style="margin-top: 70px;">
                                                <a href="/find/findBookDetail?bookId=${book.getId()}">${book.getBookName()}</a>
                                            </h4>
                                            <div style="font-size: 13px;color:#a6a6a6;">${book.getAuthor()}</div>
                                            <div class="intro">
                                                <span>${book.getProfile()}</span>
                                            </div>
                                            <div class="extra-info">
                                                <span class="info-item">
                                                    <div class="rating">
                                                        <button
                                                                style="border: none; height: 100%; background-color: #f8f9f9;"
                                                                title="分类" class="nav-category fill-current-color">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="10"
                                                                 height="10" viewBox="0 0 10 10" class="rating-star">
                                                                <path fill="#fa595f"
                                                                      d="M6.688 3.125l3.37.694-2.345 2.619L8.14 10 5.03 8.475 1.923 10l.428-3.563L0 3.82l3.37-.694L5.028 0z"></path>
                                                            </svg>
                                                            <span class="score">${book.getScore()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getMainSignature()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getSignature2()}</span>
                                                        </button>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                </c:forEach>

                            </div>
                            <div class="hd" style="margin-top: 60px;">
                                <div class="title-section">
                                    <h2 class="widget-title">无限畅听</h2>
                                    <div class="links">
                                        <a href="#" class="btn-contained" style="margin-left: 1016px;">查看更多</a>
                                    </div>
                                </div>
                            </div>

                            <div class="bd">
                                <c:forEach var="book" items="${allbook.subList(5,10)}">
                                    <div class="works-item brief-works-item">
                                        <div class="cover shadow-cover">
                                            <a href="/find/findBookDetail?bookId=${book.getId()}">
                                                <img style="width: 120px;height:180px"
                                                     src="${book.getBookImage()}"
                                                     alt="">
                                                <div class="hei"></div>

                                            </a>

                                        </div>
                                        <div class="info">
                                            <h4 class="title" style="margin-top: 70px;">
                                                <a href="/find/findBookDetail?bookId=${book.getId()}">${book.getBookName()}</a>
                                            </h4>
                                            <div style="font-size: 13px;color:#a6a6a6;">${book.getAuthor()}</div>
                                            <div class="intro">
                                                <span>${book.getProfile()}</span>
                                            </div>
                                            <div class="extra-info">
                                                <span class="info-item">
                                                    <div class="rating">
                                                        <button
                                                                style="border: none; height: 100%; background-color: #f8f9f9;"
                                                                title="分类" class="nav-category fill-current-color">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="10"
                                                                 height="10" viewBox="0 0 10 10" class="rating-star">
                                                                <path fill="#fa595f"
                                                                      d="M6.688 3.125l3.37.694-2.345 2.619L8.14 10 5.03 8.475 1.923 10l.428-3.563L0 3.82l3.37-.694L5.028 0z"></path>
                                                            </svg>
                                                            <span class="score">${book.getScore()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getMainSignature()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getSignature2()}</span>
                                                        </button>
                                                    </div>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                </c:forEach>
                            </div>
                            <div class="hd">
                                <div class="title-section" style="margin-top: 50px;">
                                    <h2 class="widget-title">签约新作</h2>
                                    <div class="links">
                                        <a href="#" class="btn-contained" style="margin-left: 1000px;">查看更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="bd">
                                <div class="slick-slider works-showcase slick-initialized">
                                    <div class="slick-list">
                                        <div class="slick-slide slick-active slick-current"
                                             style="outline: none; width: 1195px;">
                                            <div>
                                                <c:forEach var="book" items="${allbook.subList(10,15)}">
                                                    <div class="works-item brief-works-item">
                                                        <div class="cover shadow-cover">
                                                            <a href="/find/findBookDetail?bookId=${book.getId()}">
                                                                <img style="width: 120px;height:180px"
                                                                     src="${book.getBookImage()}"
                                                                     alt="">
                                                                <div class="hei"></div>

                                                            </a>

                                                        </div>
                                                        <div class="info">
                                                            <h4 class="title" style="margin-top: 70px;">
                                                                <a href="/find/findBookDetail?bookId=${book.getId()}}">${book.getBookName()}</a>
                                                            </h4>
                                                            <div style="font-size: 13px;color:#a6a6a6;">${book.getAuthor()}</div>
                                                            <div class="intro">
                                                                <span>${book.getProfile()}</span>
                                                            </div>
                                                            <div class="extra-info">
                                                <span class="info-item">
                                                    <div class="rating">
                                                        <button
                                                                style="border: none; height: 100%; background-color: #f8f9f9;"
                                                                title="分类" class="nav-category fill-current-color">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="10"
                                                                 height="10" viewBox="0 0 10 10" class="rating-star">
                                                                <path fill="#fa595f"
                                                                      d="M6.688 3.125l3.37.694-2.345 2.619L8.14 10 5.03 8.475 1.923 10l.428-3.563L0 3.82l3.37-.694L5.028 0z"></path>
                                                            </svg>
                                                            <span class="score">${book.getScore()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getMainSignature()}</span>
                                                            <span class="separator"></span>
                                                            <span
                                                                    style="font-size: 11px;line-height: 16px;color: #7777;">${book.getSignature2()}</span>
                                                        </button>
                                                    </div>
                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </c:forEach>
                                            </div>
                                            <!-- 尾部 -->
                                            <div class="mag"></div>
                                            <div class="section-container bao"
                                                 style="padding:0; margin-top:0;width:100%;background:#fff">
                                                <div class="hd">
                                                    <div class="title-section" style="background: #fff;">
                                                        <h2 class="widget-title" style="width: 100%;">
                                                            <span class="icon-xiaoya"></span>
                                                            <span class="text">小雅奖</span>
                                                            <span class="description">奖励最好的原创写作</span>
                                                        </h2>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bd" style="width: 100%;margin: 0 auto; background:#fff">
                                                <h3 class="xiaoya-issue-title"
                                                    style="width: 300px;margin: 0 auto; height: 60px;">- 第一百九十九期
                                                    -</h3>
                                            </div>
                                            <!-- 倒数第二个 -->
                                            <div class="xiaoya-award-list">
                                                <div class="award-card" style="background: #fcfbf9;">
                                                    <div class="hd">
                                                        <h4 class="award-title card-title">最佳连载</h4>
                                                        <p class="award-description card-intro">奖励两周内有更新的热门连载，奖金
                                                            1000 元。
                                                        </p>
                                                    </div>

                                                    <div class="bd">
                                                        <div class="award-object">
                                                            <div class="works-item">
                                                                <div class="cover shadow-cover">
                                                                    <a href="#" class="pic">
                                                                        <img src="https://pic.arkread.com/cover/column/f/65387086.1697696406.jpg!cover_default.jpg"
                                                                             alt="">
                                                                    </a>
                                                                    <div class="heihei"></div>
                                                                </div>
                                                                <div class="info">
                                                                    <div class="title">
                                                                        <span class="title-text">无尽塔</span>
                                                                    </div>
                                                                    <div class="author">
                                                                        <a href="#" class="author-link">
                                                                            <span
                                                                                    style="font-size: 13px;color:#a6a6a6;">寡人有猫</span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="extra-info">
                                                                        <span class="info-item">
                                                                            <div class="rating">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                     width="10" height="10"
                                                                                     viewBox="0 0 10 10"
                                                                                     class="rating-star">
                                                                                    <path fill="#DDD"
                                                                                          d="M6.688 3.125l3.37.694-2.345 2.619L8.14 10 5.03 8.475 1.923 10l.428-3.563L0 3.82l3.37-.694L5.028 0z"></path>
                                                                                </svg>
                                                                                <span class="">暂无评分</span>
                                                                            </div>

                                                                            <span class="info-item">
                                                                                <span class="separator"></span>
                                                                                <a href="#">言情</a>
                                                                            </span>


                                                                            <span class="info-item">
                                                                                <span class="separator"></span>
                                                                                <a href="#">连载中</a>
                                                                            </span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <p class="award-words">
                                                            无尽塔》是作者寡人有猫在豆瓣阅读发布的第四部长篇小说，讲述了身份成谜的遗孀何念生和大佬继承人叶凤川的爱恨纠葛。作品巧妙地将悬疑线与感情线结合，各有所图的男女主关系走向成谜。作者用精准的文笔带读者进入了
                                                            20 世纪 80 年代的美国唐人街，情节不落俗套，人物个性鲜明，故授予本期“小雅奖·最佳连载”。
                                                    </div>
                                                </div>

                                                <div class="award-card" style="background: #fcfbf9;">
                                                    <div class="hd">
                                                        <h4 class="award-title card-title">最佳连载</h4>
                                                        <p class="award-description card-intro">奖励两周内有更新的热门连载，奖金
                                                            1000 元。
                                                        </p>
                                                    </div>

                                                    <div class="bd">
                                                        <div class="award-object">
                                                            <div class="works-item">
                                                                <div class="cover shadow-cover">
                                                                    <a href="#" class="pic">
                                                                        <img src="https://pic.arkread.com/cover/column/f/65030535.1695005651.jpg!cover_default.jpg"
                                                                             alt="">
                                                                    </a>
                                                                    <div class="heihei"></div>
                                                                </div>
                                                                <div class="info">
                                                                    <div class="title">
                                                                        <span class="title-text">刺挠</span>
                                                                    </div>
                                                                    <div class="author">
                                                                        <a href="#" class="author-link">
                                                                            <span style="font-size: 13px;color:#a6a6a6;">林不晚</span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="extra-info">
                                  <span class="info-item">
                                    <div class="rating">
                                      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"
                                           class="rating-star"><path fill="#DDD"
                                                                     d="M6.688 3.125l3.37.694-2.345 2.619L8.14 10 5.03 8.475 1.923 10l.428-3.563L0 3.82l3.37-.694L5.028 0z"></path></svg>
                                      <span class="">暂无评分</span>
                                    </div>
                                    <span class="info-item">
                                      <span class="separator"></span>
                                      <a href="#">言情</a>
                                    </span>
                                    <span class="info-item">
                                      <span class="separator"></span>
                                      <a href="#">连载中</a>
                                    </span>
                                  </span></div></div></div></div><p class="award-words">
                                                        《刺挠》是作者林不晚在豆瓣阅读发表的第二部言情小说，讲述了看似冷血但顽强向上的“恶女”周柠和天之骄子陈羡久别重逢的故事。女主坚强独立，和身份地位迥异的男主之间有着奇妙的化学反应。故事以落后的小山村为背景，描写生动真实，具有极强的画面感。故授予本期“小雅奖·最佳连载”。
                                                    </p>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Swiper JS -->
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/Dou.js"></script>
<script src="/js/indexSearch.js"></script>
<script>

    var btn = document.getElementById("btn");

    function toggle() {
        var content = document.getElementById("content");
        if (content.style.display === "none") {
            content.style.display = "block";
        } else {
            content.style.display = "none";
        }
    }

    var myElement = document.getElementById("myElement");

    // 监听滚动事件
    window.addEventListener("scroll", function () {
        // 判断当前滚动位置是否到达指定位置（例如100px）
        if (window.scrollY > 300) {
            // 如果到达指定位置，显示元素
            myElement.style.display = "none";
            myElement.style.opacity = opacity;
            opacity += 0.1;
        } else {
            // 如果未到达指定位置，隐藏元素
            myElement.style.display = "block";
            myElement.style.opacity = opacity;
            opacity += 0.1;
        }
    });
    //写一个监听事件，当有用户登陆信息时，直接展示头像，而不展示登陆注册按钮
    $(document).ready(function (){
        let username='<%=username%>';
        console.log(username);
        if (username==='null') {//当前尚未登录
            console.log('success2');
            $('#user-info').empty();
            $('#user-info').append('<div class="login-buttons">'+'<a href="userLogin.jsp" data-size="sx" class="btn-contained login">'+
                '<span class="text">登录 / 注册</span></a> </div>')
        }else{//已经登陆.带着登陆信息到后端加载用户头像
            console.log('success1');
            $.ajax({
                type:"GET",
                url:"/load/Image",
                data:{username:username},
                success:function (data) {
                    $('#user-info').empty();
                    $('#nav-submit').empty();
                    for(var i=0;i<data.length;i++) {
                        $('#user-info').append('<div class="nav-user more-active">' +
                            '<a href="#" class="avatar">' +
                            '<img src="'+data[i].userAvatar+'" alt="">'+
                            '</a>' +
                            '<div class="drop-down-list">' +
                            '<a href="/myIndex/message?username='+username+'">' +
                            '<span class="text">个人主页</span>' +
                            '</a>' +
                            '<a href="#">' +
                            '<span class="text">退出登陆</span>' +
                            '</a>' +
                            '</div>' +
                            '</div>')
                        if(data[i].identify===-1){//不是作者
                            $('#nav-submit').append(` <a href="transtition.jsp" class="lnk-start-publish fill-current-color">成为作者</a>`)
                        }else{
                            $('#nav-submit').append(` <a href="authorIndex.jsp" class="lnk-start-publish fill-current-color">作者空间</a>`)
                        }

                    }
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    })
</script>
</body>

</html>